<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <div class="cms-btn-group">
                        <el-button type="primary" icon="fa fa-refresh" @click="list" size="small"> 刷新</el-button>
                        <el-button type="primary" icon="fa fa-plus" @click="create" size="small"> 新增</el-button>
                    </div>
                </div>
                <el-row>
                    <el-col :span="8" style="float: left">
                        <el-card class="box-card" style="min-height: calc(100vh - 180px);">
                            <div slot="header" class="clearfix">
                                <span>新闻类目</span>
                            </div>
                            <el-tree
                                    :data="listData"
                                    default-expand-all
                                    node-key="id"
                                    ref="tree"
                                    :expand-on-click-node="false"
                                    @node-click="edit"
                                    highlight-current
                                    :props="defaultProps">
                            </el-tree>
                        </el-card>
                    </el-col>
                    <el-col :span="10" style="margin-left:15px;float: left">
                        <el-card class="box-card" style="min-height: calc(100vh - 450px);">
                            <div slot="header" class="clearfix">
                                <span>{{tagTitle}}</span>
                                <el-button v-if="form.id" @click="destroy(form.id)" style="float: right;position: relative;bottom: 6px" type="danger" icon="fa fa-trash" size="small" plain> 删除</el-button>
                            </div>
                            <el-form :model="form" ref="form" label-width="80px">
                                <el-form-item label="编号：" prop="id">
                                    <el-input readonly v-model="form.id"></el-input>
                                </el-form-item>
                                <el-form-item label="上级：" prop="pitch" :rules="[{ required: true, message: '请选择上级类目', trigger: 'blur'}]">
                                    <el-cascader change-on-select :options="options" v-model="form.pitch"></el-cascader>
                                </el-form-item>
                                <el-form-item label="名称：" prop="name" :rules="[{ required: true, message: '请填写类目名称', trigger: 'blur'}]">
                                    <el-input  v-model="form.name" placeholder="请填写类目名称"></el-input>
                                </el-form-item>
                                <el-form-item label="图标：" prop="avatar">
                                    <el-upload
                                            class="index-avatar-uploader"
                                            :action="upload"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.avatar" :src="form.avatar"
                                             class="index-avatar" style="width: 80px;height: 80px">
                                        <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 80px;height: 80px;line-height: 80px;"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: center;margin-top: 200px">
                                <el-button type="primary" @click="update('form')">确 定</el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {CateList,CateUpdate,CateDestroy} from '@/utils/request';
    export default {
        data() {
            return {
                listData: [],//列表数据 国家政策
                form: {
                    id: '',
                    name: '',
                    pid: 1000,
                    avatar: '',
                    pitch: [],
                },
                tagTitle: '新增类目',
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                options: [{
                    value: 1000,
                    label: '新闻类目',
                    children: []
                }],
            }
        },
        activated(){
            this.list();
            this.initForm();
        },
        computed: {
            ...mapGetters(['loading','upload']),
        },
        methods: {
            initForm(){
                this.form = {
                    id: '',
                    name: '',
                    pid: 1000,
                    avatar: '',
                    pitch: [],
                };
                this.tagTitle = '新增类目';
            },
            // 新增
            create(){
                this.initForm();
            },
            //上传封面
            uploadSuccess(res, file) {
                this.form.avatar = res.data.path;
            },
            uploadBefore(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传封面图片大小不能超过 2M!');
                }
                return isJPG && isLt2M;
            },
            //编辑
            edit(row){
                this.form = {
                    id: row.id,
                    name: row.name,
                    pid: row.pid,
                    avatar: row.avatar,
                    pitch: row.pitch,
                };
                this.tagTitle = '编辑类目';
            },
            //删除
            destroy(id){
                this.$confirm('确定要删除该类目信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'cms-message-box',
                    type: 'warning'
                }).then(() => {
                    CateDestroy({id: id}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.list();
                            this.initForm();
                        }
                    });
                }).catch(() => {});
            },
            // 列表
            list(){
                CateList({params:{pid:1000}}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = res.data;
                        this.options[0].children = res.data;
                    }
                })
            },
            // 更新
            update(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        CateUpdate(this.form).then((res)=>{
                            if(res.code){
                                this.$message.error(res.msg);
                            }else{
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: res.msg,
                                    onClose:() =>{
                                        this.list();
                                        this.form.name = '';
                                    }
                                });
                            }
                        });
                    }
                });
            },
        }
    }
</script>
<style>
    .el-tree-node .el-tree-node__content{
        line-height: 35px;height: 35px;
    }
</style>